<script  lang="ts" setup>
defineProps(["item"]);
</script>

<template>
  <div class="item">
    <div class="itemLeft">
      <img :src="$props.item?.avatar" class="headerImg" />
    </div>
    <div class="itemRight">
      <div>
        <span class="name">{{ $props.item?.name }}</span>
        <span class="age">{{ $props.item?.age }}岁</span>
        <span v-if="$props.item.sex === 1" style="color:#1296db" class="iconfont sex">&#xe8b3;</span>
        <span v-else class="iconfont sex" style="color:#d4237a">&#xe8b4;</span>
      </div>
      <div>
        <span class="relationship">关系：{{ $props.item?.relationship }}</span>
      </div>
    </div>
  </div>
</template>

<style scoped lang="scss">
.item {
  flex: 1;
  display: flex;
  padding: 6px;
  background-color: #f6f7fb;
  margin: 0 6px;
  border-radius: 8px;

  .itemLeft {
    margin-right: 8px;
  }

  .headerImg {
    width: 48px;
    height: 48px;
    border-radius: 48px;
  }

  .name {
    font-size: 16px;
    color: #111;
  }

  .age {
    font-size: 14px;
    color: #111;
    margin: 0 2px 0 2px;
  }

  .sex {
    font-size: 16px;
    color: red;
  }

  .relationship {
    font-size: 14px;
    color: #666;
  }
}
</style>


